<template>
	<view class="tally">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">众筹</view>
			</template>
			<template v-slot:right>
				<view class="right_slot" @click="router('/pages/home/my_tally')">
					<image src="@/static/images/18.png"></image>
					<view>{{$t('home.我的众筹')}}</view>
				</view>
			</template>
		</uv-navbar>
		<view class="tabs">
			<view class="item" :class="active==1?'active':''" @click="changeActive(1)">{{$t('home.进行中')}}</view>
			<view class="item" :class="active==2?'active':''" @click="changeActive(2)">{{$t('home.未开始')}}</view>
			<view class="item" :class="active==3?'active':''" @click="changeActive(3)">{{$t('home.已结束')}}</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<view class="item" v-for="item in _this.list">
					<view class="label" v-if="item.percentage==100">募集完成</view>
					<view class="label" v-else-if="active==1">进行中</view>
					<view class="label" v-else-if="active==2">未开始</view>
					<view class="label" v-else-if="active==3">已结束</view>
					<view class="cover">
						<image :src="item.cover"></image>
						<view class="name">{{item.name}}</view>
					</view>
					<view class="cell">
						<view class="key">{{$t('home.活动时间')}}：</view>
						<view class="value">{{item.start_date}}-{{item.end_date}}</view>
					</view>
					<view class="cell">
						<view class="key">{{$t('home.募资资金')}}：</view>
						<view class="value">${{item.total}}</view>
					</view>
					<view class="cell">
						<view class="key">{{$t('home.每份金额')}}：</view>
						<view class="value">{{item.price}}</view>
					</view>
					<view class="cell">
						<view class="key">{{$t('home.募资天数')}}：</view>
						<view class="value">{{item.days}}</view>
					</view>
					<view class="progress">
						<view class="key">{{$t('home.已募集')}}</view>
						<view class="progress_view">
							<uv-line-progress :percentage="item.percentage" activeColor="#DDF247"
								inactiveColor="#46492E"></uv-line-progress>
							<view class="number">{{item.copies_has}}/{{item.copies_all}}</view>
						</view>
					</view>
					<view class="btn" v-if="active==1&&item.percentage!=100">
						<view @click="buy(item)">{{$t('home.参与')}}</view>
					</view>
					<view class="btn" v-if="item.percentage==100">
						<view class="end">{{$t('home.参与')}}</view>
					</view>
				</view>
				<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
			</view>
		</scroll-view>
		<uv-popup ref="popup" round="10" bgColor="none" mode="bottom">
			<TallyBuy :data="props_item" @close="popup.close" @submit="submit" />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		crowdfundingLists,
		crowdfundingJoin
	} from "@/request/api";
	import TallyBuy from "@/components/home/TallyBuy.vue";
	import {
		ref,
		reactive,
		shallowRef
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();

	const active = ref(1);
	const props_item = reactive({
		id: null,
		balance: 0.00
	});

	const getList = async () => {
		let {
			list,
			balance: balance_val
		} = await crowdfundingLists({
			status: active.value,
			page: _this.page,
			limit: _this.limit,
		});
		props_item.balance = balance_val;
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();

	const changeActive = (value) => {
		active.value = value;
		_this.list = [];
		_this.page = 1;
		getList();
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
	const props_id = ref("");
	const popup = shallowRef();
	const buy = (item) => {
		props_item.id = item.id;
		popup.value.open();
	};
	const submit = async (data) => {
		await crowdfundingJoin(data);
		uni.$uv.toast("操作成功");
		_this.list = [];
		_this.page = 1;
		getList();
		setTimeout(() => {
			popup.value.close();
		}, 1500);
	};
</script>

<style scoped lang="scss">
	$tabsHeight: 114rpx;

	.tally {
		.center_slot {
			color: #FFFFFF;
			font-size: 18px;
			font-weight: bold;
		}

		.right_slot {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 16px;
				height: 16px;
			}

			view {
				color: #FFFFFF;
				font-size: 10px;
				font-weight: 400;
				padding-top: 10rpx;
				box-sizing: border-box;
			}
		}

		.tabs {
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.item {
				width: 210rpx;
				height: 54rpx;
				line-height: 54rpx;
				text-align: center;
				color: #808080;
				font-size: 28rpx;
				border-radius: 10rpx;
				background: #202020;

				&.active {
					color: #111111;
					background: #DDF247;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navBarHeight} - #{$tabsHeight} - var(--window-top) - var(--window-bottom));

			.list {
				padding: 0 30rpx;
				box-sizing: border-box;

				.item {
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					padding: 20rpx 20rpx 0;
					box-sizing: border-box;
					background: #2E2E2E;
					position: relative;

					.label {
						width: 110rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						color: #000000;
						font-size: 24rpx;
						border-radius: 20rpx 0rpx 0rpx 20rpx;
						background: #DDF247;
						position: absolute;
						top: 40rpx;
						right: 0;
						z-index: 2;
					}

					.cover {
						width: 100%;
						height: 650rpx;
						position: relative;

						image {
							width: 100%;
							height: 650rpx;
							border-radius: 12rpx;
						}

						.name {
							width: 100%;
							height: 100rpx;
							line-height: 100rpx;
							color: #FFFFFF;
							font-size: 32rpx;
							font-weight: 800;
							padding-left: 30rpx;
							box-sizing: border-box;
							background: url(@/static/images/14.png) no-repeat;
							background-size: 100% 100%;
							position: absolute;
							left: 0;
							bottom: 0;
							z-index: 2;
						}
					}

					.cell {
						padding-top: 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;

						.key {
							width: 130rpx;
							color: #808080;
							font-size: 26rpx;
						}

						.value {
							flex: 1;
							color: #FFFFFF;
							font-size: 28rpx;
						}
					}

					.progress {
						padding-top: 20rpx;
						padding-bottom: 54rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.key {
							color: #FFFFFF;
							font-size: 24rpx;
						}

						.progress_view {
							width: 530rpx;
							position: relative;

							.number {
								color: #FFFFFF;
								font-size: 24rpx;
								position: absolute;
								left: 50%;
								bottom: -34rpx;
								transform: translateX(-50%);
							}

							:deep() {
								.uv-line-progress__text {
									color: #111;
								}
							}
						}
					}

					.btn {
						height: 148rpx;
						border-top: 1px solid #42433F;
						display: flex;
						justify-content: center;
						align-items: center;

						view {
							width: 400rpx;
							height: 88rpx;
							line-height: 88rpx;
							text-align: center;
							color: #111111;
							font-size: 28rpx;
							font-weight: bold;
							border-radius: 20rpx;
							background: #DDF247;

							&.end {
								color: #CCCCCC;
								background: #444444;
							}
						}
					}
				}
			}
		}
	}
</style>